<template>
  <div class="base-dialog">
    <el-dialog :type="type"
               :width="width"
               :custom-class="customClass"
               :fullscreen="fullscreen"
               :title="title"
               :close-on-click-modal="closeOnClickModal"
               :append-to-body="appendToBody"
               :visible.sync="visible"
               :before-close="beforeClose"
               @closed="closed">
      <slot name="body" />
      <div v-if="footer"
           slot="footer"
           class="dialog-footer">
        <slot name="footer" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'BaseDialog',
  props: {
    appendToBody: { type: Boolean, default: false }, // 是否嵌套
    closeOnClickModal: { type: Boolean, default: false }, // 是否可以点击关闭
    footer: { type: Boolean, default: true }, // 是否显示底部
    title: String, // 对话框title
    type: String, // 对话框类型：1.基础表单[base-dialog-form] 2.表格[base-dialog-table] 3.全屏 [base-dialog-fullscreen]
    width: String, // 对话框宽度800px 或 50%
    beforeClose: Function// 关闭回调函数
  },
  data () {
    return {
      visible: false,
      fullscreen: false
    }
  },
  computed: {
    customClass () {
      let className = ''
      switch (this.type) {
        case 'form':
          className = 'base-dialog-form'
          break
        case 'table':
          className = 'base-dialog-table'
          break
        case 'fullscreen':
          className = 'base-dialog-fullscreen'
          break
      }
      return className
    }
  },
  created () {
    this.type === 'fullscreen' && (this.fullscreen = true)
  },
  methods: {
    open () {
      this.visible = true
    },
    close () {
      this.visible = false
    },
    closed () {
      this.$emit('closed')
    }
  }
}
</script>

<style lang="scss">
.base-dialog {
  text-align: left;
  .el-dialog__wrapper {
    overflow: hidden;
    .el-dialog {
      display: flex;
      flex-direction: column;
      .el-dialog__header {
        height: 40px;
        line-height: 40px;
        padding: 0px 20px;
        background: #eff3fa;
        color: #fff;
        border-bottom: 1px solid #dcdfe6;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        .el-dialog__title {
          font-size: 16px;
          // font-weight: bold;
        }
        .el-dialog__headerbtn {
          top: 12px;
        }
      }
      .el-dialog__body {
        flex: 1;
        overflow: auto;
        padding: 20px;
      }
      .el-dialog__footer {
        text-align: center;
        border-top: 1px solid #eee;
        padding: 8px 20px;
        background: #fefefe;
      }
    }
    .base-dialog-form {
      height: auto;
      margin-top: 15vh !important;
      .el-dialog__body {
        padding: 20px 20px 0 20px;
      }
      .el-dialog__footer {
        border: none;
        padding: 10px 20px 20px;
        background: none;
      }
      .custom-table {
        // 取消表格下边线
        tbody tr:last-child td {
          border-bottom: none !important;
        }
      }
    }
    .base-dialog-table {
      height: 90vh;
      margin-top: 5vh !important;
      .el-dialog__body {

      }
    }
    .base-dialog-fullscreen {
      height: 100vh;
      width: 100vw;
      .el-dialog__body {
        padding: 10px;
      }
    }
  }
}
</style>

<!--//组件调用-->
<!--<dialog-a ref="dialogaaa" />-->
<!--//组件引用-->
<!--import DialogA from './Dialog.vue'-->
<!--//注册组件-->
<!--components: {-->
<!--DialogA-->
<!--},-->
<!--//打开Dialog-->
<!--this.$refs.dialogaaa.open()-->

<!--//组件内部定义逻辑，注意dialog隐藏显示是show不是if,所以初次加载逻辑不能写在created里边-->
<!--&lt;!&ndash;  Dialog&ndash;&gt;-->
<!--<template>-->
<!--  <base-dialog ref="dialog"-->
<!--               width="800px"-->
<!--               type="form"-->
<!--               :fullscreen="true"-->
<!--               :title="title"-->
<!--               footer-->
<!--               :before-close="close"-->
<!--               @closed="closed">-->
<!--    <template slot="body">-->
<!--      <div>tree</div>-->
<!--    </template>-->
<!--    <template slot="footer">-->
<!--      <el-button type="primary" @click="save">保存</el-button>-->
<!--      <el-button @click="close()">取消</el-button>-->
<!--    </template>-->
<!--  </base-dialog>-->
<!--</template>-->

<!--<script>-->
<!--import BaseDialog from '@/components/BaseDialog.vue'-->
<!--export default {-->
<!--  components: {-->
<!--    BaseDialog-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      title: ''-->
<!--    }-->
<!--  },-->
<!--  computed: {-->

<!--  },-->
<!--  created() {},-->
<!--  methods: {-->
<!--    open() {-->
<!--      this.$refs.dialog.open()-->
<!--      this.title = '新增XXXXXX'-->
<!--    },-->
<!--    close() {-->
<!--      this.$refs.dialog.close()-->
<!--    },-->
<!--    closed() {},-->
<!--    save() {}-->
<!--  }-->
<!--}-->
<!--</script>-->
<!--<style lang='scss' scoped>-->

<!--</style>-->
